<!DOCTYPE html>
<html>
<head>
<title>Connect4</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"
	charset="UTF-8">
	
<script src="<?php echo base_url(); ?>assets/js/jquery-2.0.3.min.js"></script>
<script src="<?php echo base_url(); ?>assets/js/bootstrap.min.js"></script>
<link href="<?php echo base_url(); ?>assets/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script>
	function howTo() {
		alert("Join four circles of the same color in a row, column or diagonal.");
	}
	
	function about() {
		alert("Developed by Antonio and Catarina.");
	}
	
	function checkPassword() {
		var p1 = $("#pass1"); 
		var p2 = $("#pass2");
		
		if (p1.val() == p2.val()) {
			p1.get(0).setCustomValidity("");  // All is well, clear error message
			return true;
		}	
		else	 {
			p1.get(0).setCustomValidity("Passwords do not match");
			return false;
		}
	}
</script>
</head>
<body>
	<nav class="navbar navbar-default" role="navigation">
		<div class="navbar-inverse">
			<div class="navbar-inner">
				<a class="brand" href="">Connect4</a>
			</div>
		</div>
	</nav>
	
	<div class="row">
		<div class="row offset1">
			<h1>New Account</h1>
		</div>
	
		<div class="row offset1">
			<?php 
				echo form_open('account/createNew');
				echo form_label('Username'); 
				echo form_error('username');
				echo form_input('username',set_value('username'),"required autofocus=\"autofocus\"");
				echo form_label('Password'); 
				echo form_error('password');
				echo form_password('password','',"id='pass1' required");
				echo form_label('Password Confirmation'); 
				echo form_error('passconf');
				echo form_password('passconf','',"id='pass2' required oninput='checkPassword();'");
				echo form_label('First');
				echo form_error('first');
				echo form_input('first',set_value('first'),"required");
				echo form_label('Last');
				echo form_error('last');
				echo form_input('last',set_value('last'),"required");
				echo form_label('Email');
				echo form_error('email');
				echo form_input('email',set_value('email'),"required");
				echo "<br><img id=\"captcha\" src=\"" . base_url() . "application/views/securimage_show.php\" alt=\"CAPTCHA Image\" />";
				echo "<br><input type=\"text\" name=\"captcha_code\" size=\"10\" maxlength=\"6\" required/>";
				echo "<a href=\"#\" onclick=\"document.getElementById('captcha').src = '" . base_url() . "application/views/securimage_show.php?' + Math.random(); return false\">";
				echo "Try another</a>";
				echo "<br><input type=\"submit\" class=\"btn btn-primary\" name=\"submit\" value=\"Submit\"/>";
				echo form_close();
			?>
		</div>
	</div>
</body>
</html>